<template>
     <div style="width: 102%">
      <el-table :data="orderList" style="width: 102%" row-key="id">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="userName" label="用户名"></el-table-column>
        <el-table-column prop="phone" label="电话"></el-table-column>
        <el-table-column prop="orderTime" label="下单时间"></el-table-column>
        <el-table-column prop="price" label="价格"></el-table-column>
        <el-table-column prop="tableNum" label="桌号"></el-table-column>
        <el-table-column prop="goodsName" label="下单餐品"></el-table-column>
        
        <el-table-column prop="orderNum" label="订单号"></el-table-column>

            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="deleteOrder(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
</template>

<script>
export default {
  data() {
    return {
      orderList: [],
    };
  },


  mounted() {
    this.showOrderTable();
  },
  
  methods: {
    showOrderTable: async function() {
      const response = await this.$http.get("/order/getAll")    
        if (response.status === 200) {
          this.orderList = response.data;
        } else {
          console.error("获取全部订单错误", response.message);
        }      
    },
    
    deleteOrder(row) {
      const index = this.orderList.findIndex((item) => item.id === row.id);
      if (index === -1) {
        this.$message.error("删除失败: 未找到订单");
        return;
      }

      this.$confirm("此操作将永久删除该订单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 发起DELETE请求到后端API
          this.$http
            .delete(`/order/del/${row.id}`)
            .then((response) => {
              if (response.data.success) {
                this.orderList.splice(index, 1);
                this.$message.success("删除成功");
              } else {
                this.$message.error(response.data.message || "删除失败");
              }
            })
            .catch((error) => {
              console.error("删除请求失败:", error);
              this.$message.error("删除请求失败");
            });
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },

   
    }
  }

  

</script>

<style scoped>
.el-menu-item {
  width: 200px; /* 设置菜单项的宽度 */
}
</style>